<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="blind-box">
		<view class="null" v-if="info.blindbox_inventory <= 0">
			<text class="iconfont icon-gantanhao1 gantan"></text>
			<text>商品库存不足，请等待商家补货！</text>
		</view>
		<view class="box-bg" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/index_bg.png') + ')' }">
			<view class="top">
				<view class="top-img">
					<image v-if="info.blindbox_images != ''" :src="$util.img(info.blindbox_images)" @error="boxImg()" mode="aspectFit"></image>
					<image v-else :src="$util.img('public/uniapp/blindbox/default.png')"></image>
				</view>
				<view class="right">
					<view class="blind-title font-size-toolbar">{{ info.blindbox_name }}</view>
					<view class="scribe-price font-size-tag price-font">￥{{ info.price }}</view>
					<view class="new-price font-size-tag" v-if="info.new_price > 0">
						新人价：
						<text class="icon price-font">￥</text>
						<text class="money price-font" >{{ parseFloat(info.new_price).toFixed(2).split(".")[0] }}</text>
					   <text class="icon price-font">.{{ parseFloat(info.new_price).toFixed(2).split(".")[1] }}</text>
					</view>
				</view>
				<view class="rule font-size-tag" @click="rule()">活动规则</view>
				<view class="explain-img" @click="toIndex()"><image :src="$util.img('public/uniapp/blindbox/index.png')" mode="" class="index-img"></image></view>
			</view>

			<view class="cabinet-box">
				<view class="cabinet" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/cabinet_two.png') + ')' }">
					<swiper :autoplay="false" :indicator-dots="false" :interval="3000" :duration="1000" :current="inxs" :circular="true" :disable-touch="true">
						<swiper-item v-for="(item, index) in boxPage" :key="index">
							<view class="center-one">
								<view class="item" v-for="(item2, index2) in item" :key="index2" @click="checked(index2, item2)">
									<image v-if="item2.status == 0" :src="$util.img('public/uniapp/blindbox/box.png')" mode="" class="box"></image>
									<image v-if="item2.status == 1" :src="$util.img('public/uniapp/blindbox/null_box.png')" mode="" class="box"></image>
									<image :src="$util.img('public/uniapp/blindbox/checked.png')" class="checked" v-if="act == index2"></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="btn-one" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/btn_one.png') + ')' }" @click="changeGroup()">换一组</view>
					<view class="btn-two" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/btn_two.png') + ')' }" @click="openBlind()">拆盲盒</view>
				</view>
			</view>

			<view class="list-box">
				<view class="list_bit" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/goods_bg.png') + ')' }">
					<view class="list" id="innovate">
						<view class="imgs-list" ref="name" :style="{ transform: 'translateX(' + lampX + 'rpx)' }">
							<image
								v-for="(item, index) in infoList"
								:key="index"
								v-if="item.goods_image"
								:src="goodsImg(item.goods_image)"
								@click="redirect('/pages/goods/detail', { goods_id: item.goods_id })"
								class="imgs-img"
								@error="infoListImg(index)"
								mode="aspectFit"
							></image>
						</view>
					</view>
				</view>
				<view class="all font-size-tag" @click="redirect('/pages_promotion/blindbox/goods_list', { blindbox_id: info.blindbox_id })">查看全部</view>
			</view>
			<view class="footer" @click="toMyprize()">我的奖品</view>
		</view>
		<uni-popup ref="rulePopup" type="center">
			<view class="rule-wrap">
				<view class="content-wrap">
					<image :src="$util.img('public/uniapp/blindbox/rule_bg.png')" mode="" class="rule-head"></image>
					<view class="rule-title font-size-toolbar">活动规则</view>
					<scroll-view scroll-y="true" class="rule">
						<view>
							<view class="rule-tit">
								<view class="rule-img"><image :src="$util.img('public/uniapp/blindbox/tag.png')" mode=""></image></view>
								<view class="tit">1. 活动时间</view>
							</view>
							<view class="text">开始时间：{{ $util.timeStampTurnTime(info.start_time) }}</view>
							<view class="text">结束时间：{{ $util.timeStampTurnTime(info.end_time) }}</view>
							<view class="rule-tit" v-if="info.remark">
								<view class="rule-img"><image :src="$util.img('public/uniapp/blindbox/tag.png')" mode=""></image></view>
								<view class="tit">2. 活动说明</view>
							</view>
							<view class="text" v-if="info.remark">{{ info.remark }}</view>
						</view>
					</scroll-view>
					<text class="iconfont icon-round-close" @click="closeRulePopup"></text>
				</view>
			</view>
		</uni-popup>
		<view class="success-popup">
			<uni-popup ref="againPopup" type="center">
				<view class="success-wrap">
					<view class="content-wrap">
						<view class="success" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/blindbox/success_bg.png') + ')' }">
							<view class="goods">
								<view class="goods-img"><image v-if="boxDetail.sku_image" :src="$util.img(boxDetail.sku_image)" mode="aspectFit" class=""></image></view>
								<view class="goods-name">{{ boxDetail.sku_name }}</view>
								<view class="goods-price">
									<text class="font-size-tag">￥</text>
									{{ parseFloat(boxDetail.price).toFixed(2).split(".")[0] }}
								   <text class="font-size-tag">.{{ parseFloat(boxDetail.price).toFixed(2).split(".")[1] }}</text>
								</view>
							</view>
							<view class="again">
								<view class="color-sub discharge">
									已为您存放至盒柜
									<text class="color-base-text tobox" @click="redirect('/pages_promotion/blindbox/my_prize', { blindbox_id: boxDetail.blindbox_id })">
										前往我的奖品>
									</text>
								</view>
								<view class="agains-btn">
									<view class="fill-btn" @click="receive()" >填写收货信息</view>
									<view class="again-btn color-base-bg" @click="reagain()">再来一次</view>
								</view>
							</view>
						</view>
						<view class="close-btn" @click="successClose()"><image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image></view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 选择支付方式弹窗 -->
		<view class="" v-if="info.member_info">
			<ns-payment
				ref="choosePaymentPopup"
				:isBalance="is_balance"
				@useBalance="useBalance"
				:balanceDeduct="info.price > 0 && info.member_info.balance_total > 0 ? balanceDeduct : '0'"
				:payMoney="payMoney"
				@confirm="blindOrderCreate"
			></ns-payment>
		</view>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import SocketTask from '@/common/js/socketTest.js';
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
export default {
	components: {
		nsSwitch
	},
	data() {
		return {
			lampX: 0, //跑马灯文字位置
			act: null,
			switch: false,
			blindbox_id: null,
			info: {},
			infoList: [],
			boxPage: [],
			boxData: {},
			is_balance: 0,
			payMoney: 1,
			isSub: false,
			payPrice: 0,
			outTradeNo: '',
			payInfo: {},
			page: 1,
			pages: '',
			inxs: null,
			orderId: null,
			boxDetail: {},
			skuId: 0,
			//分享建立上下级所需id
			memberId: 0,
			//分享时详情所用图片
			shareImg: ''
		};
	},
	onLoad(options) {
		this.blindbox_id = options.blindbox_id;

		this.$util.getMemberId().then(resolve => {
			this.memberId = resolve;
		});
		//小程序分享接收source_member
		if (options.source_member) {
			uni.setStorageSync('source_member', options.source_member);
		}
		// 小程序扫码进入，接收source_member
		if (options.scene) {
			var sceneParams = decodeURIComponent(options.scene);
			sceneParams = sceneParams.split('&');
			if (sceneParams.length) {
				sceneParams.forEach(item => {
					if (item.indexOf('blindbox_id') != -1) this.blindbox_id = item.split('-')[1];
				});
			}
		}

		this.outTradeNo = options.outTradeNo || '';
		if (this.outTradeNo != '') {
			this.getboxGoods();
		} else {
			this.getGoods();
			this.getblindbox();
		}
	},
	onshow() {
		//记录分享关系
		if (uni.getStorageSync('token') && uni.getStorageSync('source_member')) {
			this.$util.onSourceMember(uni.getStorageSync('source_member'));
		}
	},
	/**
	 * 转发分享
	 */
	onShareAppMessage(res) {
		var title = this.info.blindbox_name;
		let route = this.$util.getCurrentShareRoute(this.memberId);
		var path = route.path;
		return {
			title: title,
			path: path,
			imageUrl: this.shareImg,
			success: res => {},
			fail: res => {}
		};
	},
	// 分享到微信朋友圈
	onShareTimeline() {
		var title = this.info.blindbox_name;
		let route = this.$util.getCurrentShareRoute(this.memberId);
		let query = route.query;
		return {
			title: title,
			query: query,
			imageUrl: this.shareImg
		};
	},
	methods: {
		goodsImg(imgStr) {
			let imgs = imgStr.split(',');
			return imgs[0]
				? this.$util.img(imgs[0], {
						size: 'mid'
				  })
				: this.$util.getDefaultImage().goods;
		},
		getGoods() {
			this.$api.sendRequest({
				url: '/blindbox/api/goods/info',
				data: {
					blindbox_id: this.blindbox_id
				},
				success: res => {
					if (res.code >= 0) {
						if (res.data) {
							this.info = res.data;
							//获取分享图片
							if (this.info.blindbox_images) {
								this.shareImg = this.$util.img(this.info.blindbox_images);
							} else {
								this.shareImg = this.$util.img('public/uniapp/blindbox/default.png');
							}
							var infoList = [];
							for (var i in res.data.goods_list) {
								infoList.push(res.data.goods_list[i]);
							}
							this.infoList = infoList;
							setTimeout(() => {
								if (this.infoList.length > 3) {
									this.scrollWindow();
								}
							}, 500);
						} else {
							this.$util.showToast({
								title: '暂无盲盒活动',
								mask: true,
								duration: 2000
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index');
							}, 2000);
							return;
						}
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		//拆开盲盒
		openBlind() {
			if (!uni.getStorageSync('token')) {
				setTimeout(() => {
					this.$refs.login.open('/pages_promotion/blindbox/index?blindbox_id=' + this.blindbox_id);
				});
			} else {
				if (this.info.is_new == 0) {
					this.payPrice = this.info.new_price;
				} else {
					this.payPrice = this.info.price;
				}
				if (this.payMoney != 0) {
					this.payMoney = this.payPrice;
				}
				if (this.act != null) {
					this.$refs.choosePaymentPopup.open();
				} else {
					this.$util.showToast({
						title: '请选择盒子'
					});
				}
			}
		},
		toMyprize() {
			if (!uni.getStorageSync('token')) {
				setTimeout(() => {
					this.$refs.login.open('/pages_promotion/blindbox/index?blindbox_id=' + this.blindbox_id);
				});
			} else {
				this.$util.redirectTo('/pages_promotion/blindbox/my_prize', { blindbox_id: this.info.blindbox_id });
			}
		},
		getblindbox() {
			this.$api.sendRequest({
				url: '/blindbox/api/goods/boxPage',
				data: {
					blindbox_id: this.blindbox_id,
					page: this.page
				},
				success: res => {
					if (res.code >= 0) {
						this.page++;
						this.boxPage.push(res.data.list);
						this.pages = res.data.page_count;
						if (this.inxs == null) {
							this.inxs = 0;
						} else {
							setTimeout(() => {
								this.inxs++;
							}, 100);
						}
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		getboxGoods() {
			this.$api.sendRequest({
				url: '/blindbox/api/order/boxDetail',
				data: {
					out_trade_no: this.outTradeNo
				},
				success: res => {
					if (res.code >= 0) {
						this.isSub = false;
						this.$util.showToast({
							title: '支付成功'
						});
						this.boxDetail = res.data;
						this.$refs.againPopup.open();
						this.blindbox_id = this.boxDetail.blindbox_id;
						this.encapsulation();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.getGoods();
						this.getblindbox();
					} else {
						this.isSub = false;
						this.encapsulation();
						this.act = null;
						this.$util.showToast({
							title: res.message
						});
					}
					this.is_balance = 0;
				}
			});
		},
		blindOrderCreate() {
			if (this.isSub) return;
			this.isSub = true;
			this.$api.sendRequest({
				url: '/blindbox/api/order/createOrder',
				data: {
					blindbox_id: this.blindbox_id,
					blindbox_goods_id: this.boxData.id,
					is_balance: this.is_balance,
					price: this.payPrice
				},
				success: res => {
					uni.hideLoading();
					if (res.code >= 0) {
						this.outTradeNo = res.data;
						if (this.payMoney == 0) {
							this.getboxGoods();
						} else {
							this.$refs.choosePaymentPopup.getPayInfo(res.data);
							this.isSub = false;
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					} else {
						this.encapsulation();
						this.act = null;
						this.isSub = false;
						if (res.data.error_code == 10 || res.data.error_code == 12) {
							uni.showModal({
								title: '订单未创建',
								content: res.message,
								confirmText: '去设置',
								success: res => {
									if (res.confirm) {
										this.selectAddress();
									}
								}
							});
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
					if (this.payMoney != 0) {
						this.payMoney = this.payPrice;
					}
				}
			});
		},
		// 使用余额
		useBalance() {
			if (this.is_balance) {
				this.is_balance = 0;
			} else {
				this.payMoney = 0;
				this.is_balance = 1;
			}
			this.$forceUpdate();
		},
		//选择盒子
		checked(index, e) {
			if (this.act == index) {
				this.act = null;
			} else {
				if (e.status == 0) {
					this.act = index;
				} else {
					this.$util.showToast({
						title: '该盲盒已出售'
					});
				}
			}
			this.boxData = e;
		},
		scrollWindow() {
			let lampX = 0;
			let width = 0;
			let query = uni.createSelectorQuery().in(this);
			query
				.select('#innovate')
				.boundingClientRect(data => {
					width = data.width;
				})
				.exec();
			let inner = this.infoList;
			let inx = 0;
			let interval = setInterval(() => {
				if (this.lampX % 170 == 0) {
					if (inx == inner.length) {
						inx = 0;
					}
					this.infoList.push(inner[inx]);
					inx++;
				}
				this.lampX--;
			}, 20);
		},
		changeGroup() {
			this.act = null;
			if (this.boxPage.length < this.pages) {
				this.getblindbox();
			} else {
				if (this.pages == 1) {
					this.$util.showToast({
						title: '没有更多盒子可换了哦~'
					});
				} else if (this.pages <= 0) {
					this.$util.showToast({
						title: '盲盒已售空，等待商家补货'
					});
				}
				if (this.inxs + 1 == this.pages) {
					this.inxs = 0;
				} else {
					this.inxs++;
				}
			}
		},
		infoListImg(index) {
			this.infoList[index].goods_image = this.$util.getDefaultImage().goods;
			this.$forceUpdate();
		},
		boxImg() {
			this.info.blindbox_images = this.$util.getDefaultImage().goods;
			this.$forceUpdate();
		},
		redirect(url, id) {
			this.$util.redirectTo(url, id);
		},
		//打开活动规则
		rule() {
			this.$refs.rulePopup.open();
		},
		//关闭活动规则
		closeRulePopup() {
			this.$refs.rulePopup.close();
		},
		//拆开盲盒关闭
		successClose() {
			this.$refs.againPopup.close();
			this.act = null;
			this.encapsulation();
			this.getGoods();
			// location.reload();
		},
		//再来一次
		reagain() {
			this.successClose();
		},
		// 领取奖品
		receive(){
			uni.setStorage({
				key: 'blindOrderCreateData',
				data: {
					sku_id: this.boxDetail.sku_id,
					num:1,
					blindbox_goods_id: this.boxDetail.blindbox_goods_id,
					out_trade_no: this.outTradeNo
				},
				success: ()=> {
					this.$util.redirectTo('/pages_promotion/blindbox/fill_address');
				}
			});	
		},
		//盒子方法
		encapsulation() {
			this.$api.sendRequest({
				url: '/blindbox/api/goods/boxPage',
				data: {
					blindbox_id: this.blindbox_id,
					page: this.inxs + 1
				},
				success: res => {
					if (res.code >= 0) {
						this.boxPage.splice(this.inxs, 1, res.data.list);
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			});
		},
		toIndex() {
			this.$util.redirectTo('/pages/index/index');
		},
		/**
		 * 微信订阅消息
		 */
		subscribeMessage() {
			this.$api.sendRequest({
				url: '/weapp/api/weapp/messagetmplids',
				data: {
					keywords: 'ORDER_PAY,ORDER_DELIVERY,ORDER_TAKE_DELIVERY'
				},
				success: res => {
					if (res.data.length) {
						uni.requestSubscribeMessage({
							tmplIds: res.data,
							success: res => {},
							fail: res => {
								console.log('fail', res);
							}
						});
					}
				}
			});
		}
	},
	watch: {
		is_balance: function(newval, oldval) {
			if (newval == 0) {
				this.payMoney = this.payPrice;
			} else {
				if (this.info.member_info) {
					if (this.info.member_info.balance_total - this.payPrice >= 0) {
						this.payMoney = 0;
					} else {
						this.payMoney = this.payPrice - this.info.member_info.balance_total;
					}
				}
			}
		}
	},
	computed: {
		// 余额抵扣
		balanceDeduct() {
			if (this.info.member_info) {
				if (this.info.is_balance == 1) {
					if (this.info.member_info.balance_total <= parseFloat(this.payPrice).toFixed(2)) {
						return parseFloat(this.info.member_info.balance_total).toFixed(2);
					} else {
						return parseFloat(this.payPrice).toFixed(2);
					}
				}
			}
		}
	}
};
</script>

<style lang="scss">
.blind-box {
	.null {
		color: #ff0000;
		line-height: 1;
		margin-left: 30rpx;
		padding: 24rpx 0;
		.gantan {
			margin-right: 20rpx;
		}
	}
	.box-bg {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-bottom: 160rpx;
		height: 100vh;
	}
	.top {
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		position: relative;
		padding-top: 60rpx;
		.top-img {
			width: 210rpx;
			height: 210rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				border-radius: 10rpx;
				height: 100%;
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			view {
				color: #fff;
			}
			.blind-title {
				line-height: 1.5;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-word;
				height: 100rpx;
			}
			.scribe-price {
				line-height: 1;
				margin-top: 20rpx;
				text-decoration: line-through;
			}
			.new-price {
				line-height: 1;
				.icon {
					font-size: 30rpx;
				}
				.money {
					font-size: 40rpx;
				}
			}
		}
		.rule {
			width: 20rpx;
			height: 100rpx;
			line-height: 1;
			color: #fff;
			background-color: #4c3889;
			padding: 20rpx;
			border-radius: 10rpx 0 0 10rpx;
			margin-top: -20rpx;
		}
		.explain-img {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 200rpx;
			left: 660rpx;
			z-index: 1000;
			background-color: #4c3889;
			padding: 12rpx;
			border-radius: 10rpx 0 0 10rpx;
			.index-img {
				width: 100% !important;
				height: 100% !important;
			}
		}
	}
	.cabinet-box {
		height: 780rpx;
		.cabinet {
			background-size: 100%;
			background-repeat: no-repeat;
			position: relative;
			height: 100%;
			margin: 84rpx 30rpx 0;
			swiper {
				height: 600rpx !important;
			}
			.center-one {
				position: absolute;
				top: 90rpx;
				left: 94rpx;
				display: flex;
				flex-wrap: wrap;
				.item {
					position: relative;
					.checked {
						z-index: 601;
						width: 142rpx !important;
						height: 168rpx !important;
						margin-top: 36rpx !important;
						position: absolute !important;
						left: -12rpx;
						top: 0;
					}
					.box {
						width: 120rpx;
						height: 122rpx;
						margin-right: 72rpx;
						position: relative;
						margin-top: 76rpx;
					}
				}
			}
			.btn-one {
				width: 270rpx;
				padding: 20rpx 0 32rpx;
				line-height: 1;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-weight: bold;
				text-align: center;
				position: absolute;
				top: 620rpx;
				left: 60rpx;
				color: #fff;
			}
			.btn-two {
				width: 270rpx;
				padding: 20rpx 0 32rpx;
				line-height: 1;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-weight: bold;
				text-align: center;
				position: absolute;
				top: 620rpx;
				left: 360rpx;
				color: #fff;
			}
		}
	}
	.list-box {
		position: relative;
		margin: -30rpx 30rpx 68rpx;
		z-index: 500;
		overflow: hidden;
		.list_bit {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 230rpx;
			display: flex;
			padding: 0 70rpx 0 30rpx;
			.list {
				height: 230rpx;
				position: relative;
				padding: 0 10rpx;
				overflow: hidden;
				overflow-x: scroll;
				width: 90%;
				.imgs-list {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					.imgs-img {
						transition: all 0.4s;
						background-color: #fff;
					}
				}
				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				@keyframes scroll {
					100% {
						/* 需要滚动内容的总高度 */
						left: -540rpx;
					}
				}
			}
		}

		.all {
			width: 20rpx;
			line-height: 1;
			color: #fff;
			background: linear-gradient(0deg, #ffc579, #ffa141);
			padding: 38rpx 18rpx;
			border-radius: 10rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}
	.footer {
		font-size: 30rpx;
		color: #fff;
		background-color: #8a6de1;
		border-radius: 50rpx 50rpx 0 0;
		width: 100%;
		line-height: 1;
		padding: 36rpx 0;
		text-align: center;
		position: fixed;
		bottom: 0;
		z-index: 600;
	}
	.rule-wrap {
		border-radius: 10rpx;
		width: 79.95vw;
		box-sizing: border-box;
		background-color: #fff;
		.content-wrap {
			width: 100%;
			border-radius: 8rpx;
			.rule-title {
				position: absolute;
				text-align: center;
				font-weight: bold;
				color: #fff;
				left: 40%;
				top: 40rpx;
			}
			.rule-head {
				width: 100%;
				height: 146rpx;
				border-radius: 8rpx;
			}
			.rule {
				padding: 0 30rpx 30rpx;
				box-sizing: border-box;
				max-height: 700rpx;
				.rule-tit {
					display: flex;
					align-items: center;
				}
				.rule-img {
					width: 30rpx;
					height: 32rpx;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.tit {
					font-weight: bold;
					margin-top: 10rpx;
					font-size: 30rpx;
				}
				.text {
					word-break: break-word;
					margin-left: 48rpx;
				}
			}
			.icon-round-close {
				color: #fff;
				text-align: center;
				position: absolute;
				bottom: -150rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 70rpx;
			}
		}
	}
	.success-wrap {
		width: 630rpx;
		.content-wrap {
			width: 100%;
			border-radius: 20rpx;
			.success {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 50rpx 0 0;
				.goods {
					width: 360rpx;
					margin: 0 auto;
					background-color: #fff;
					border-radius: 10rpx;
					.goods-img {
						width: 360rpx;
						height: 360rpx;
						image {
							width: 360rpx;
							height: 360rpx;
						}
					}
					.goods-name {
						padding: 20rpx 26rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						height: 80rpx;
						line-height: 1.4;
					}
					.goods-price {
						line-height: 1;
						padding: 16rpx 26rpx 26rpx;
						font-size: 36rpx;
						color: var(--price-color);
					}
				}
				.again {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx 0;
					margin-top: 50rpx;
					.discharge {
						text-align: center;
						.tobox {
							margin-left: 20rpx;
						}
					}
					.agains-btn {
						display: flex;
						justify-content: space-around;
						margin: 30rpx 0 0;
						view {
							color: #fff;
							border-radius: 36rpx;
							line-height: 1;
							width: 260rpx;
							text-align: center;
						}
						.fill-btn {
							background-color: #ff9344;
							padding: 22rpx 0;
						}
						.again-btn {
							padding: 22rpx 0;
						}
					}
				}
			}
			.close-btn {
				margin-top: 30rpx;
				text-align: center;
				image {
					width: 82rpx;
					height: 82rpx;
				}
			}
		}
	}
}
</style>
<style>
/deep/ .uni-popup__wrapper.uni-bottom {
	border-radius: 40rpx 40rpx 0 0 !important;
}
/deep/.register-box .uni-scroll-view {
	background: unset !important;
}
>>> .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
	overflow: unset;
}
/deep/ uni-popup__wrapper-box goodslist-uni-popup-box {
	/* border-radius: 20rpx !important; */
}
/deep/ .success-popup .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
	border-radius: 20rpx !important;
	max-width: 84% !important;
}
/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
	background: unset !important;
}
</style>
